import {PlusOutlined} from '@ant-design/icons'
import {
    Row,
    Col,
    Flex,
    Typography,
    Button,
    Form,
    Input,
    Select,
    Table,
    Alert,
    Switch,
    Modal,
    Radio,
    message
} from 'antd'
import React, {useEffect, useState, useRef} from 'react'
import MyDatePicker from '../components/MyDatePicker'
import {contentArticleEdit, contentArticleList} from '../service/content'

function ContentArticle() {
    // 保存修改的id
    const [id, setId] = useState('')
    // 获取Form表单控件示例
    const [myForm] = Form.useForm()
    // 模态框标题
    const [modalTitle, setModalTitle] = useState('新增分类')
    // 创建表单的引用
    const formRef = useRef()
    // 模态框
    const [isModalOpen, setIsModalOpen] = useState(false)
    // 保存表格中选中的项
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    // 表格中是否有选中
    const hasSelected = selectedRowKeys.length > 0
    // 保存选择的日期
    const [selectedDateString, setSelectedDateString] = useState(null)
    // 保存内容列表
    const [list, setList] = useState([])
    // 总页码
    const [total, setTotal] = useState(0)
    // 搜索条件
    const [condition, setCondition] = useState({})
    // 页码
    const [pageNo, setPageNo] = useState(1)
    // 用于更新列表
    const [n, setN] = useState(1)
    const [m, setM] = useState(1)
    // 请求列表
    const request = async () => {
        const res = await contentArticleList({
            ...condition,
            pageNo: pageNo,
            articleStatus: 1
        })
        console.log(res)
        setList(res.data.objects)
        setTotal(res.data.total)
    }
    // 请求分类
    // 添加文章
    const addArticle = (v) => {
    }

    useEffect(() => {
        (async () => {
            const res = await contentArticleList({
                ...condition,
                pageNo: pageNo,
                articleStatus: 1
            })
            console.log(res)
            setList(res.data.objects)
            setTotal(res.data.total)
        })()
    }, [n, pageNo, m])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={4}>信息管理</Typography.Title>
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Form layout="inline" onFinish={addArticle}>
                        <Form.Item label="文章标题：" name="articleTitle">
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="文章分类："
                            name="articleCategoryId"
                            initialValue={'0'}
                        >
                            <Select
                                style={{width: 120}}
                                options={[
                                    {
                                        value: '0',
                                        label: '全部'
                                    },
                                    {
                                        value: '1',
                                        label: '启用'
                                    },
                                    {
                                        value: '2',
                                        label: '停用'
                                    }
                                ]}
                            />
                        </Form.Item>
                        <Form.Item
                            label="发布状态："
                            name="articleStatus"
                            initialValue={'0'}
                        >
                            <Select
                                style={{width: 120}}
                                options={[
                                    {
                                        value: '0',
                                        label: '全部'
                                    },
                                    {
                                        value: '1',
                                        label: '启用'
                                    },
                                    {
                                        value: '2',
                                        label: '停用'
                                    }
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="关联活动：" name="activaty" initialValue={'0'}>
                            <Select
                                style={{width: 120}}
                                onChange={() => {
                                }}
                                options={[
                                    {
                                        value: '0',
                                        label: '全部'
                                    },
                                    {
                                        value: '1',
                                        label: '启用'
                                    },
                                    {
                                        value: '2',
                                        label: '停用'
                                    }
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="更新时间：">
                            <MyDatePicker
                                selectedDateString={selectedDateString}
                                setSelectedDateString={setSelectedDateString}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="default" htmlType="reset">
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Typography.Paragraph style={{fontSize: 16}}>
                        文章列表
                    </Typography.Paragraph>
                    {hasSelected && (
                        <Alert
                            message={`已经选择 ${selectedRowKeys.length} 项`}
                            type="info"
                            showIcon
                        />
                    )}
                </Col>
                <Col span={24}>
                    <Table
                        pagination={{
                            total,
                            defaultCurrent: 1,
                            onChange: async (pno) => {
                                setPageNo(pno)
                            }
                        }}
                        rowKey="id"
                        rowSelection={{
                            selectedRowKeys,
                            onChange: (newSelectedRowKeys) => {
                                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                                setSelectedRowKeys(newSelectedRowKeys)
                            }
                        }}
                        dataSource={list}
                        columns={[
                            {
                                title: '编号',
                                dataIndex: 'id',
                                key: 'id'
                            },
                            {
                                title: '文章标题',
                                dataIndex: 'articleTitle',
                                key: 'articleTitle'
                            },
                            {
                                title: '文章分类',
                                dataIndex: 'articleCategory',
                                key: 'articleCategory'
                            },
                            {
                                title: '活动标题',
                                dataIndex: 'activityWord',
                                key: 'activityWord'
                            },
                            {
                                title: '标签',
                                dataIndex: 'articleLabel',
                                key: 'articleLabel'
                            },
                            {
                                title: '创建时间',
                                dataIndex: 'createTime',
                                key: 'createTime'
                            },
                            {
                                title: '更新时间',
                                dataIndex: 'updateTime',
                                key: 'updateTime'
                            },
                            {
                                title: '启用状态',
                                dataIndex: 'categoryStatus',
                                key: 'categoryStatus',
                                render: (_, record) => {
                                    return (
                                        <Switch
                                            // defaultChecked={record.articleStatus == 2 ? () : false}
                                            onChange={async (value) => {
                                                // const res = await categoryEdit({
                                                //   id: record.id,
                                                //   categoryStatus: +value
                                                // })
                                                // message.success('状态修改成功')
                                            }}
                                        />
                                    )
                                }
                            },
                            {
                                title: '操作',
                                dataIndex: 'op',
                                key: 'op',
                                align: 'center',
                                render: (_, record) => {
                                    return (
                                        <span className="op">
                      <a
                          onClick={async () => {
                              const res = await contentArticleEdit({
                                  id: record.id,
                                  articleStatus: 0,
                                  longitude: record.longitude,
                                  latitude: record.latitude
                              })
                              console.log(res)
                              if (res.code === '0') {
                                  message.success('下线成功')

                                  setTimeout(() => {
                                      setM(m + 1)
                                  }, 1000)

                              }
                          }}
                      >
                        下线
                      </a>
                    </span>
                                    )
                                }
                            }
                        ]}
                    />
                </Col>
            </Row>
        </>
    )
}

export default ContentArticle
